<template>
  <header class="header-nav" :class="{ 'header-top-fixed': !isTop }">
    <div class="header-nav-content">
      <div class="header-nav-logo">
        <img src="/assets/img/logo_black.png"/>
      </div>
      <n-menu
          :options="menuOptions"
          mode="horizontal"
          @update:value="handleUpdateValue"
          :themeOverrides="menuStyle"
      />
    </div>
  </header>
</template>
<script lang="ts">export default { name: 'Header' }</script>
<script setup lang="ts">
  import menuStyle from './menu_config.json'
  import { menuDark } from 'naive-ui'

  const isTop = ref(true)

  const menuOptions = ref([
    {
      label: '首页',
      href: '/',
      key: 'home',
    },
    {
      label: '业务板块',
      href: '/service',
      key: 'business',
      children: [
        {
          label: '技术服务',
          key: 'service',
          href: '/business/service',
        },
        {
          label: '设备租赁',
          key: 'rent',
          href: '/business/rent',
        },
        {
          label: '方案执行',
          key: 'programDelivery',
          href: '/business/programDelivery',
        },
        {
          label: '宣传片拍摄',
          key: 'filmShooting',
          href: '/business/filmShooting',
        },
      ],
    },
    {
      label: '公司新闻',
      href: '/software',
      children: [
        {
          label: '智能小镇管理系统',
          key: 'software',
          href: '/software/smartTown',
        },
        {
          label: '大数据管理系统',
          key: 'software',
          href: '/software/bigData',
        },
      ],
    },
    {
      label: '项目案例',
      key: 'projectCase',
      href: '/projectCase',
    },
    {
      label: '直播场景',
      key: 'liveScene',
      href: '/liveScene',
    },
    {
      label: '关于我们',
      key: 'about',
      href: '/about',
    },
    {
      label: '控制台',
      key: 'controlPanel',
      href: '/controlPanel',
    },
  ])
  const handleUpdateValue = (e) => {
    console.log('e：', e)
  }

  let handleScroll

  onMounted(() => {
    const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
    isTop.value = scrollTop < 40

    handleScroll = () => {
      const scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop
      isTop.value = scrollTop < 40
    }
    window.addEventListener('scroll', handleScroll)
  })

  onUnmounted(() => {
    handleScroll && window.removeEventListener('scroll', handleScroll)
  })
</script>

<style lang="less" scoped>
  @import './index';
</style>

